<template>
  <view class="cardstyle" :style="{'background-color': bgColor}">
    <view class="titlebox" v-if="!isAd">
      <view class="imgbox" v-if="mode === 2">
        <image 
          :src="showImage" 
          mode="aspectFill" 
          @error="handleImageError"
        ></image>
      </view>
      <view class="title-content">
        <text v-if="isTop" style="color: #f00;">置顶</text>
        <text :style="isTop ? 'margin-left: 8rpx;' : ''">{{ title }}</text>
      </view>
    </view>
    <view v-if="isAd">
      <view class="title-content" style="color: #aaa;">{{ title }}</view>
      <view class="ad-imgbox">
        <view v-for="(item, index) in adImages" :key="index" class="ad-img-item">
          <image :src="item" mode="aspectFill" @error="handleAdImageError(index)"></image>
        </view>
      </view>
      <view class="tipsbox">
        <text style="color: #00f; margin-right: 15rpx;">广告</text>
        <text>{{ author }}</text>
        <view style="flex:1; display: flex; justify-content: flex-end;">
          <text>{{ time }}</text>
        </view>
      </view>
    </view>
    <view class="tipsbox" v-if="!isAd">
      <text>{{ author }}</text>
      <text>{{ comments }}评</text>
      <view style="flex:1; display: flex; justify-content: flex-end;">
        <text>{{ time }}</text>
      </view>
    </view>
    <slot name="tips" v-if="showSearch"></slot>
  </view>
</template>

<script>
export default {
  name: "CustomTextView",
  data() {
    return {
      isImageError: false, 
      errorPlaceholder: "/static/error.png", 
      emptyPlaceholder: "/static/empty.png",
      adImageError: [] 
    };
  },
  computed: {
    showImage() {
      if (this.isImageError) {
        return this.errorPlaceholder;
      } else if (this.image) {
        return this.image;
      } else {
        return this.emptyPlaceholder;
      }
    },
    adImages() {
      return this.adImageList.map((item, index) => {
        return this.adImageError[index] ? this.errorPlaceholder : item;
      });
    }
  },
  methods: {
    handleImageError() {
      this.isImageError = true;
    },
    handleAdImageError(index) {
      this.$set(this.adImageError, index, true);
    }
  },
  props: {
    title: { type: String, default: "" },
    image: { type: String, default: "" },
    adImageList: { type: Array, default: () => [] },
    author: { type: String, default: "" },
    comments: { type: [String, Number], default: 0 },
    time: { type: String, default: "" },
    isTop: { type: Boolean, default: false },
    mode: { type: Number, default: 2 },
    showSearch: { type: Boolean, default: false },
    bgColor: { type: String, default: "#fff" },
    isAd: { type: Boolean, default: false }
  }
};
</script>

<style scoped>
.cardstyle {
  padding: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.titlebox {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
  margin-bottom: 15rpx;
}
.imgbox {
  width: 120rpx;
  height: 120rpx;
  flex-shrink: 0; 
}
.imgbox image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}
.title-content {
  font-size: 30rpx;
  line-height: 1.5;
}
.ad-imgbox {
  display: flex;
  width: 100%; 
  height: 120rpx; 
  margin: 15rpx 0;
}
.ad-img-item {
  flex: 1;
  margin-right: 6rpx;
}
.ad-img-item:last-child {
  margin-right: 0;
}
.ad-img-item image {
  width: 100%;
  height: 100%;
  border-radius: 4rpx;
}
.tipsbox {
  display: flex;
  font-size: 24rpx;
  color: #666;
  align-items: center;
}
.tipsbox text {
  margin-right: 20rpx;
}
</style>